<template>
  <div style="margin: 10px 0px;">
    <div style="border-bottom: 1px solid gray;"><h2>Team Leaders</h2></div>
    <div style="text-align: center;">
      <InfoCard v-for="(i,index) in special" :key="index"
        :uuid    = "i.uuid"
        :member_type    = "i.member_type"
        :name    = "i.name"
        :position    = "i.position"
        :degree   = "i.degree"
        :email    = "i.email"
        :research = "i.research"
        :imgUrl   = "i.imgUrl"
        :websiteText = "i.websiteText"
        :websiteLink = "i.websiteLink"
        heightStyle = "heightTeacher"
      />
    </div>
    <div style="border-bottom: 1px solid gray;"><h2>Academic Staff</h2></div>
    <div style="text-align: center;">
      <InfoCard v-for="(i,index) in teamLeaders" :key="index"
        :uuid    = "i.uuid"
        :member_type    = "i.member_type"
        :name    = "i.name"
        :position    = "i.position"
        :degree   = "i.degree"
        :email    = "i.email"
        :research = "i.research"
        :imgUrl   = "i.imgUrl"
        :websiteText = "i.websiteText"
        :websiteLink = "i.websiteLink"
        heightStyle = "heightTeacher"
      />
    </div>
    <div style="border-bottom: 1px solid gray;"><h2>PhD</h2></div>
    <div style="text-align: center;">
      <InfoCard v-for="(i,index) in phd" :key="index"
        :uuid    = "i.uuid"
        :member_type    = "i.member_type"
        :name    = "i.name"
        :position    = "i.position"
        :degree   = "i.degree"
        :email    = "i.email"
        :research = "i.research"
        :imgUrl   = "i.imgUrl"
        :websiteText = "i.websiteText"
        :websiteLink = "i.websiteLink"
      />
    </div>
    <div style="border-bottom: 1px solid gray;"><h2>MSc</h2></div>
    <div style="text-align: center;">
      <InfoCard v-for="(i,index) in msc" :key="index"
        :uuid    = "i.uuid"
        :member_type    = "i.member_type"
        :name    = "i.name"
        :position    = "i.position"
        :degree   = "i.degree"
        :email    = "i.email"
        :research = "i.research"
        :imgUrl   = "i.imgUrl"
        :websiteText = "i.websiteText"
        :websiteLink = "i.websiteLink"
      />
    </div>
    <div style="border-bottom: 1px solid gray;"><h2>Gratuated</h2></div>
    <div style="text-align: center;">
            <InfoCard v-for="(i,index) in gratuated" :key="index"
        :uuid    = "i.uuid"
        :member_type    = "i.member_type"
        :name    = "i.name"
        :position    = "i.position"
        :degree   = "i.degree"
        :email    = "i.email"
        :research = "i.research"
        :imgUrl   = "i.imgUrl"
        :websiteText = "i.websiteText"
        :websiteLink = "i.websiteLink"
      />
    </div>
  </div>
</template>

<script>
import InfoCard from './InfoCard.vue'
export default {
  components: { InfoCard },
  data() {
    return {
      teamLeaders: [],
      phd: [],
      msc: [],
      gratuated: [],
      special: [],
    };
  },
  created() {
    this.$http.get('/json/Members.json').then((response) => {
      // console.log(response);
      this.special = response.data.special;
      this.teamLeaders = response.data.teamLeaders;
      this.phd = response.data.phd;
      this.msc = response.data.msc;
      this.gratuated = response.data.gratuated;
    });
  }
}
</script>

<style>

</style>
